import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { CommandBar, getTheme } from 'office-ui-fabric-react';

class Pagination extends Component {
  static defaultProps = {
    page: 1,
    pageSize: 50,
    total: 0
  };

  changePage = (event, item) => {
    const { onChangePage } = this.props;
    onChangePage && onChangePage(item.data);
  };

  changePageSize = (event, item) => {
    const { onChangePageSize } = this.props;
    onChangePageSize && onChangePageSize(item.data);
  };

  render() {
    const { page, pageSize, total } = this.props;
    const pageCount = Math.ceil(total / pageSize);
    const barItems = [];

    const theme = getTheme();
    const style = { color: theme.palette.neutralPrimary };

    barItems.push({
      key: 'first',
      text: '第一页',
      data: 1,
      iconOnly: true,
      iconProps: {
        iconName: 'ChevronLeftEnd6',
        style
      },
      onClick: this.changePage
    });

    barItems.push({
      key: 'prev',
      text: '上一页',
      data: Math.max(1, page - 1),
      iconOnly: true,
      iconProps: {
        iconName: 'ChevronLeftSmall',
        style
      },
      onClick: this.changePage,
      styles: { icon: { color: theme.palette.neutralDark } }
    });

    const length = 2;
    const start = Math.max(1, page - length);
    const end = Math.min(pageCount, page + length);

    if (start > 1) {
      barItems.push({
        key: 'prevEtc',
        text: '...',
        disabled: true
      });
    }

    for (let index = start; index <= end; index++) {
      barItems.push({
        key: index,
        text: index,
        data: index,
        checked: index === page,
        onClick: index === page ? undefined : this.changePage
      });
    }

    if (pageCount > end) {
      barItems.push({
        key: 'nextEtc',
        text: '...',
        disabled: true
      });
    }

    barItems.push({
      key: 'next',
      text: '下一页',
      data: Math.min(page + 1, pageCount),
      iconOnly: true,
      iconProps: {
        iconName: 'ChevronRightSmall',
        style
      },
      onClick: this.changePage
    });

    barItems.push({
      key: 'last',
      text: '最后页',
      data: pageCount,
      iconOnly: true,
      iconProps: {
        iconName: 'ChevronRightEnd6',
        style
      },
      onClick: this.changePage
    });

    barItems.push({
      key: 'total',
      text: `共${pageCount}页${total}条记录`,
      disabled: true
    });

    const pageSizeItems = [
      {
        key: 'pageSizeList',
        text: `每页${pageSize}条`,
        subMenuProps: {
          items: [
            {
              key: 'pageSize20',
              text: 20,
              data: 20,
              onClick: this.changePageSize
            },
            {
              key: 'pageSize50',
              text: 50,
              data: 50,
              onClick: this.changePageSize
            },
            {
              key: 'pageSize100',
              text: 100,
              data: 100,
              onClick: this.changePageSize
            },
            {
              key: 'pageSize500',
              text: 500,
              data: 500,
              onClick: this.changePageSize
            }
          ]
        }
      }
    ];

    return <CommandBar items={barItems} farItems={pageSizeItems} />;
  }
}

Pagination.propTypes = {
  page: PropTypes.number.isRequired,
  pageSize: PropTypes.number,
  total: PropTypes.number.isRequired,
  onChangePage: PropTypes.func,
  onChangePageSize: PropTypes.func
};

export default Pagination;
